<template>
  <div class="w-full statistical-center">
    <statisticalHeader />
    <div class="mt--9px ml--6px flex flex-1 gap-10px flex-col">
      <div class="px-40px flex items-center gap-12px text-28px fw-700">
        <el-date-picker
          class="!w-160px"
          v-model="queryDate"
          type="week"
          format="YYYY-MM-DD"
          placeholder="请选择周"
          value-format="YYYYMMDD"
          :clearable="false"
        />
        <ClassStudentCascader @change="cascaderChange" />
      </div>
      <div
        ref="echartWarpRef"
        class="statistical-center-content px-40px pb-60px flex gap-20px flex-wrap"
        v-loading="loading"
      >
        <template v-if="pageData?.length">
          <div
            class="echart-card min-w-600px h-282px"
            v-for="(item, index) in pageData"
            :key="index"
          >
            <Echart
              :width="getViewportPx(600)"
              :height="getViewportPx(226)"
              :options="
                useLineOptions([], {
                  title: {
                    text: item?.studentName || item?.className || '',
                    left: 'center'
                  },
                  grid: {
                    top: getViewportPx(35),
                    right: '5%',
                    bottom: getViewportPx(30)
                  },
                  legend: {
                    textStyle: {
                      fontSize: getViewportPx(24)
                    }
                  },
                  xAxis: {
                    type: 'category',
                    data: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
                    axisLabel: {
                      fontSize: getViewportPx(12)
                    }
                  },
                  yAxis: {
                    ...getAxisNameConfig('单位：次')
                  },
                  series: [
                    {
                      barWidth: getViewportPx(28),
                      data: getChartData(item?.dailyHeartRates)
                    }
                  ]
                }).baseOptions
              "
            />
          </div>
        </template>
        <template v-else>
          <div class="flex-1 flex items-center justify-center">
            <el-empty description="暂无数据" />
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getViewportPx } from '@/utils/formatter'
import { statisticalCenterApi } from '@/api/school/statisticalCenter/index'
import { useLineOptions } from '@/hooks/chart/useLineOptions'
import statisticalHeader from './components/statisticalHeader.vue'
import { getAxisNameConfig } from './utils'
import dayjs from 'dayjs'
import isoWeek from 'dayjs/plugin/isoWeek'
// 扩展 dayjs 功能
dayjs.extend(isoWeek)
const pageData: any = ref({})
const loading = ref(true)
const queryDate = ref(dayjs().isoWeekday(1).format('YYYYMMDD'))
const cascaderParams: any = ref({})

const queryParams = computed(() => {
  return {
    schoolCode: cascaderParams.value?.schoolCode || '',
    classId: cascaderParams.value?.classId || '',
    queryDate: queryDate.value
  }
})
const init = async (studentId?: number) => {
  try {
    loading.value = true
    const list = await statisticalCenterApi.getHeartRateWeekly({
      ...queryParams.value
    })
    if (studentId) {
      const findItem = list.find((item) => item.studentId === studentId)
      pageData.value = findItem ? [findItem] : []
    } else {
      pageData.value = list
    }
  } catch (error) {
    console.error(error)
    pageData.value = []
  } finally {
    loading.value = false
  }
}
const cascaderChange = async (params) => {
  cascaderParams.value = params
}
const getChartData = (baseData) => {
  return baseData
    ? baseData.map((item) => {
        return {
          name: item.dayOfWeek,
          value: item.avgHeartRate || 0
        }
      })
    : []
}

watch(
  () => queryParams.value,
  () => {
    init(cascaderParams.value.studentId)
  },
  {
    immediate: true
  }
)
</script>
<style lang="scss" scoped>
@import url('./index.scss');

.echart-card {
  padding: 15px 0;
}
</style>
